<template>
  <div class="register">
    <ul class="list">
      <li class="li">
        <div class="text">请确认预约信息 </div>
        <div class="text en">Please confirm the information</div>
      </li>
    </ul>

    <div class="bg-pic">
      <img class="pic" src="/static/images/bg.png" alt="">
    </div>

    <div class="item" v-for="(item, index) in list" :key="index">
      <div class="item-name">{{item.name}}</div>
      <div class="item-name active">
        <p>{{item.contentCn}}</p>
        <p>{{item.contentEn}}</p>
      </div>
    </div>

    <ul class="form">
      <li class="item-form" v-for="(item, index) in listData" :key="index">
        <div class="item-top">
          <img class="item-img" :src="item.itemImg" alt="">{{item.itemText}}
        </div>
        <div class="item-fill">
          <input type="text" :placeholder="item.placeholder">
        </div>
      </li>
    </ul>

    <pickBirth></pickBirth>
    <pickGrade></pickGrade>

    <div class="bottom">
      <div class="join">参加人数  No. of Participants</div>
      <div class="total">
        <div class="num" :class="{active: tab===1}" @click="tab=1">
          <img class="patriarch" src="/static/images/patriarch.png" alt="">
          <p>1人</p>
          <p>One person</p>
        </div>
        <div class="num" :class="{active: tab===2}" @click="tab=2">
          <img class="patriarch" src="/static/images/patriarch.png" alt="">
          <img class="patriarch" src="/static/images/patriarch.png" alt="">
          <p>2人</p>
          <p>Two person</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import pickBirth from './pickBirth.vue'
import pickGrade from './pickGrade.vue'
export default {
  components: {
    pickBirth,
    pickGrade
  },
  data () {
    return {
      tab: 1,
      list: [
        {
          name: '活动名称  Events Name',
          contentCn: '爱莎交流日',
          contentEn: 'ISA exchange day'
        },
        {
          name: '活动日期  Date',
          contentCn: '2019 - 12 - 24',
          contentEn: ''
        },
        {
          name: '活动时间  Time',
          contentCn: '09: 01 - 11: 30 am',
          contentEn: '请在08：30进场'
        },
        {
          name: '活动地点  Venue',
          contentCn: '科学城校区',
          contentEn: 'Science city campus'
        },
        {
          name: '活动地址  Adress',
          contentCn: '广州市科学城88路88号',
          contentEn: 'No.88, science city 88 road, guangzhou'
        }
      ],
      listData: [
        {
          itemImg: '/static/images/patriarch.png',
          itemText: '家长姓名  Full Name',
          placeholder: '请填写真实姓名 Please fill in your real name'
        },
        {
          itemImg: '/static/images/phone.png',
          itemText: '联系手机  Mobile Phone',
          placeholder: '请填写手机号码 Please fill in your phone number'
        },
        {
          itemImg: '/static/images/email.png',
          itemText: '联系邮箱 Email',
          placeholder: '请填写电子邮箱 Please fill in your E-mail'
        }
      ]
    }
  }
}
</script>
<style lang="less">
.register{
  margin-top: 1.5rem;
  height: 50rem;
  background: #f8f8f8;
  .list{
    background: white;
    .li{
      width: 100%;
      height: 2.5rem;
      font-size: .5rem;
      color: gray;
      background: #f8f8f8;
      .text{
        transform: translate(0, 80%);
        &.en{
          margin-top: .2rem;
          font-size: .6rem;
        }
      }
    }
  }
  .bg-pic{
    .pic{
      width: 100%;
      border-bottom: 1px solid #CCC;
    }
  }
  .item{
    background: white;
    width: 100%;
    height: 2.5rem;
    font-size: .5rem;
    display: flex;
    border-bottom: 1px solid #CCC;
    .item-name{
      flex: 1;
      transform: translate(0, 20%);
      text-align: left;
      margin-left: 1rem;
      &.active{
        color: #de7a62;
      }
    }
  }
  .form{
    background: white;
    margin-top: .5rem;
    .item-form{
      width: 100%;
      height: 3.5rem;
      font-size: .6rem;
      border-top: 1px solid #CCC;
      .item-top{
        display: block;
        text-align: left;
        margin-left: .8rem;
        .item-img{
          width: .6rem;
          height: .6rem;
          margin-top: .6rem;
          margin-right: .2rem;
        }
      }
      .item-fill{
        input{
          width: 90%;
          height: 1.5rem;
          font-size: .5rem;
          border: 1px solid #ccc;
          margin-top: .2rem;
        }
      }
      .item-fill-img{
        width: .8rem;
        height: .8rem;
        transform: translate(900%, -145%);
      }
    }
  }
  .bottom{
    background: white;
    .join{
      font-size: .6rem;
      text-align: left;
      margin-left: .6rem;
    }
    .total{
      display: flex;
      width: 14rem;
      .num{
        border: 1px solid #ccc;
        margin-top: .5rem;
        height: 4rem;
        background: #f8f8f8;
        flex: 1;
        margin-left: 1rem;
        transform: translate(20%, 0);
        &.active{
          background: #de7a62;
          color: white;
        }
        img{
          width: .8rem;
          height: .8rem;
          transform: translate(-200%, 0);
        }
        p{
          font-size: .6rem;
        }
      }
    }
  }
}
</style>